<!-- 运费模板添加&修改 -->
<!-- 新增线路 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    :show-close="false"
    @close="closeDialog"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="formData"
      label-position="right"
      label-width="110px"
      style="width: 100%"
    >
      <el-form-item
        label="模板类型"
        prop="templateType"
      >
        <el-select
          v-model="formData.templateType"
          placeholder="请选择模板类型"
          style="width: 100%"
          clearable
          value-key="id"
        >
          <el-option
            v-for="item in templateTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
      >
        <el-select
          v-model="formData.transportType"
          placeholder="请选择运送类型"
          style="width: 100%"
          clearable
          value-key="id"
        >
          <el-option
            v-for="item in transportTypeList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="关联城市"
      >
        <span
          v-show="formData.templateType !== 3"
        >全国</span>

        <el-checkbox-group
          v-show="formData.templateType === 3"
          v-model="formData.associatedCityList"
        >
          <el-checkbox label="2">京津冀</el-checkbox>
          <el-checkbox label="3">江浙沪</el-checkbox>
          <el-checkbox label="4">川渝</el-checkbox>
          <el-checkbox label="5">黑吉辽</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="首重价格"
        prop="firstWeight"
      >
        <el-input
          v-model="formData.firstWeight"
          placeholder="请输入首重价格"
          maxlength="10"
        >
          <span
            slot="suffix"
            style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
          >元</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
      >
        <el-input
          v-model="formData.continuousWeight"
          placeholder="请输入续重价格"
          maxlength="10"
        >
          <span
            slot="suffix"
            style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
          >元</span>
        </el-input>
      </el-form-item>
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
      >
        <el-input
          v-model="formData.lightThrowingCoefficient"
          placeholder="请输入轻抛系数"
          maxlength="10"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: center"
    >
      <el-button
        type="warning"
        style="width: 80px;"
        @click="submit"
      >确认</el-button>
      <el-button
        type="write"
        style="width: 80px;"
        @click="closeDialog"
      >取消</el-button>
    </div>
  </el-dialog>
</template>
<script>

//
import { addFreightList, editFreightList } from '@/api/freight.js'
// const cY = [
//   { id: 1, name: '京津冀' },
//   { id: 2, name: '江浙沪' },
//   { id: 3, name: '川渝' },
//   { id: 4, name: '黑吉辽' }
// ]
export default {
  data() {
    return {
      type: '',
      dialogFormVisible: false,
      templateTypeList: [
        { id: 1, name: '同城寄' },
        { id: 2, name: '省内寄' },
        { id: 3, name: '经济区互寄' },
        { id: 4, name: '跨省寄' }
      ],
      transportTypeList: [{ id: 1, name: '普快' }, { id: 2, name: '特快' }],
      formData: {
        associatedCityList: [],
        continuousWeight: '',
        firstWeight: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: ''
      },
      rules: {
        // associatedCityList: [
        //   { required: true, message: '关联城市不能为空', trigger: 'blur' }
        // ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ],
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  // mounted() {
  // this.rowList()
  // this.r()
  // },
  computed: {
    title() {
      if (this.type === 'edit') {
        return '编辑'
      } else {
        return '添加'
      }
    }
  },
  methods: {
    openDialog(type) {
      this.type = type
      this.dialogFormVisible = true
    },
    editFreight(type, row) {
      this.type = type
      this.dialogFormVisible = true
      console.log(row)
      this.formData = row
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogFormVisible = false
      this.$refs.dataForm.resetFields()
      this.formData = {
        associatedCityList: [],
        continuousWeight: '',
        firstWeight: '',
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: ''
      }
    },

    // 点击确定按钮
    async submit() {
      await this.$refs.dataForm.validate()
      this.formData.associatedCityList = this.formData.associatedCityList.length > 0 ? this.formData.associatedCityList : [1]
      if (this.type === 'add') {
        await addFreightList(this.formData)
        this.$message.success('添加成功')
      } else {
        await editFreightList(this.formData)
        this.$message.success('编辑成功')
      }
      this.$emit('changeInfo')
      this.closeDialog()
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 40px 66px 0 50px !important;
  }
}
</style>
